<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item"
                 style="margin-left: 10px;"
                 type="primary"
                 size="mini"
                 icon="el-icon-edit"
                 @click="handleCreate">
        添加
      </el-button>
    </div>
    <el-table :key="tableKey"
              v-loading="listLoading"
              :data="list"
              border
              fit
              highlight-current-row
              style="width: 100%">
      <el-table-column prop="Username"
                       label="用户名"
                       width="180">
      </el-table-column>
      <el-table-column prop="Name"
                       label="姓名"
                       width="180">
      </el-table-column>
      <el-table-column prop="TelPhone"
                       label="手机号码">
      </el-table-column>
      <el-table-column prop="Email"
                       label="邮箱">
      </el-table-column>
      <el-table-column prop="IsActive"
                       label="是否激活"
                       width="110">
        <template slot-scope="{row}">
          <div slot="reference"
               class="name-wrapper"
               v-if="!row.IsActive">
            <el-tag size="medium"
                    type="danger">锁定</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="InsertDate"
                       label="创建时间"
                       width="130">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini"
                     @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini"
                     type="danger"
                     @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background
                     layout='prev, pager, next, jumper, ->, total'
                     :total="listQuery.Total"
                     :current-page="listQuery.CurrentPage"
                     :page-size="listQuery.PageSize"
                     @current-change="currentChange">
      </el-pagination>
    </div>

    <update-dialog ref="update"></update-dialog>
  </div>
</template>

<script>
import { read, destroy } from '@/api/sys/account'
import update from './update'
import role from './role'

export default {
  name: 'SysAccount',
  components: {
    'update-dialog': update
  },
  data () {
    return {
      tableKey: 0,
      list: null,
      listLoading: true,
      listQuery: {
        SortBy: '',
        Order: '',
        Total: 0,
        PageSize: 14,
        CurrentPage: 1,
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      this.listLoading = true
      read(this.listQuery).then(response => {
        let { Data } = response
        this.list = Data.List

        this.listQuery.Total = Data.Total
        this.listQuery.CurrentPage = Data.CurrentPage
        this.listLoading = false
      })
    },
    currentChange (current_page) {
      this.listQuery.CurrentPage = current_page
      this.getList()
    },
    handleCreate () {
      this.$refs.update.open()
    },
    handleEdit (index, row) {
      this.$refs.update.open(row.Id)
    },
    handleDelete (index, row) {
      let that = this
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        destroy(row.Id).then(response => {
          if (response.IsSuccess) {
            that.getList()
            that.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
          else {
            that.$message({
              type: 'error',
              message: '删除失败! ' + response.Message
            });
          }
        })
      }).catch(() => { });
    }
  }
}
</script>
